<template>
  <div tabindex="0" :class="['drag', { 'drag-active': active }]" ref="upload" @drop="handleDrop" @dragleave="handleDragleave" @dragenter="handleDragenter" @dragover="handleDragenter" @mouseover="handleMouseover" @mouseout="handleMouseout">
    <el-icon size="52" color="#a8abb2">
      <UploadFilled />
    </el-icon>
    <p class="drag-subtile">
      支持点击/粘贴/拖拽到此区域上传
    </p>
    <input ref="fileIpt" class="filePaste-ipt" />
    <input class="file-ipt" type="file" :accept="accept" multiple @change="changeFile" />
  </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { UploadFilled } from '@element-plus/icons-vue'
const upload = ref(null)
const active = ref(false)
const fileIpt = ref(null)
defineProps(['accept'])
const handleMouseover = function (event) {
  fileIpt.value.focus()
  // 粘贴
  fileIpt.value?.addEventListener('paste', handlePaste)
}
const handleMouseout = function (event) {
  fileIpt.value.blur()
  fileIpt.value?.removeEventListener('paste', handlePaste)
}

const emit = defineEmits(["file"])
const handleFileName = (fileList) => {
  let files = Array.from(fileList)
  let renameReportFile = []
  for (let i in files) {
    renameReportFile.push(new File([files[i]], new Date().getTime() + files[i].name, { type: files[0].type }))
  }
  emit("file", renameReportFile)
}
const changeFile = (e) => {
  e.preventDefault()
  handleFileName(e.target.files)
}

const handleDragleave = (e) => {
  active.value = false
  e.preventDefault()
}
const handleDragenter = (e) => {
  active.value = true
  e.preventDefault()
}

const handleDrop = (e) => {
  e.preventDefault()
  active.value = false
  handleFileName(e.dataTransfer.files)
}

const handlePaste = (e) => {
  e.preventDefault()
  handleFileName(e.clipboardData.files)
}
</script>

<style lang="scss" scoped>
@mixin borderColor($color: #2260FF) {
  border: 1px dashed $color;
}

.drag {
  position: relative;
  height: 160px;
  @include borderColor(#DEDEDE);
  border-radius: 4px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;

  &:active {
    @include borderColor
  }

  &:hover {
    @include borderColor
  }

  &-active {
    @include borderColor
  }

  &-title {
    font-size: 14px;
  }

  &-subtile {
    width: 450px;
    font-size: 12px;
    color: #999999;
    margin-top: 0;
    text-align: center;
  }
}

.file-ipt {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.filePaste-ipt {
  position: fixed;
  right: -100vw;
  opacity: 0;
}
</style>